<template>
	<div>
		<div class="city-search">
			<input type="text" v-model="keyword" class="search-input" placeholder="输入城市或拼音">
		</div>
		<div class="search-content" ref="search" v-show="keyword">
			<ul>
				<li class="search-item"
				 v-for="item in list" 
				 :key="item.id"
				  @click="handleCityClick(item.name)"
				 >{{item.name}}</li>
				<li class="search-item" v-show="hasNoData">没有找到匹配数据</li>
			</ul>
		</div>
	</div>
</template>
<script>
import Bscroll from 'better-scroll'
import {mapState,mapMutations} from 'vuex'
export default{
	props:{
		cities:Object
	},
	data(){
		return{
			keyword:'',
			list:[],
			timer:null
		}
	},
	computed:{
		hasNoData(){
			return !this.list.length;
		}
	},
	watch:{
		keyword(){
			if(this.timer){
				clearTimeout(this.timer)
			}
			if(!this.keyword){
				this.list=[];
				return;
			}
			this.timer=setTimeout(()=>{
				const result=[];
				for(let i in this.cities){
					this.cities[i].forEach((value)=>{
						if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
							result.push(value)

						}

					})

				}
				this.list=result;
			},100)
		}
	},
	mounted(){
		this.scroll=new Bscroll(this.$refs.search)
	},
	methods:{
		handleCityClick(city){
			// this.$store.dispatch('changeCity',city);
			this.changeCity(city);
			this.$router.push('/');
		},
		...mapMutations(['changeCity'])
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';
.city-search{
	height:px2rem(26px);
	background-color: $bgColor;
	padding-top:px2rem(5px);
	padding-left:px2rem(10px);
	padding-right:px2rem(10px);
}
.search-input{
	height:px2rem(20px);
	width:100%;
	text-align: center;
	border-radius: px2rem(3px);
	padding:0 px2rem(2px);
	box-sizing: border-box;
}
.search-content{
	overflow: hidden;
	position: absolute;
	top:px2rem(74px);
	left:0;
	bottom:0;
	right:0;
	z-index: 999;
	background: #eee;
}
.search-item{
	line-height: px2rem(32px);
	padding-left: px2rem(10px);
	color:#555;
	background: #fff;
	border-bottom: 1px solid #ccc;

}
</style>